<template>
	<!-- <div class="introduction">
    <div class="intrTop">
      <div class="xinxi_solution_main">
        <div class="xinxi_solution_bg">
          <div class="main_mobile">
            <ul>
              <li class="one">
                <div class="left"></div>
                <div class="left_top">

                  <i>联系我们</i>
                  <img src="../../../assets/image/home/button1.png">
                </div>
                <div class="right">
                  <div class="right_content4">
											<span id="">
												机构地址：<br/>
												云南省昆明市盘龙区环城东路50号 </span><br/>
                    <span id="">
												捐赠热线：<br/>
												134334341222(毕先生) <br>152372737282(代老板)
												<br/><br/>
												谨慎捐款，支付后暂不支持退款
											</span>
                  </div>

                </div>
              </li>
              <li class="one">
                <div class="left"></div>
                <div class="left_top">
                  <i>平台协议</i><img src="../../../assets/image/home/button1.png">
                </div>
                <div class="right">
                  <div class="right_content2">
                    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;捐赠协议<br>

                    &emsp;&emsp;因乙方发起的公益项目，甲方欲以乙方的名义向丙方捐赠（款项、物资）用于，为了保证捐赠款项、物资得到合理、妥善利用，根据《中华人民共和国公益事业捐赠法》、《基金会管理条例》、《中华人民共和国合同法》等法律法规，经平等协商，甲乙丙三方自愿达成如下协议：<br>
                    <div id="aa" @click="centerDialogVisible = true">流浪捐赠平台协议</div>
                    <el-dialog
                      title="平台协议"
                      :visible.sync="centerDialogVisible"
                      width="50%"
                      center>
										<span>

									甲方：_________   乙方：_________<br>

	　　_________以捐赠资金的方式，真诚与_________携手，共同为中国西部的贫困地区做一件利国利民的公益事业。<br>

	　　根据_________教育扶贫项目赞助方案，甲方愿意赞助_________元。该资金赞助的项目可由甲方命名。<br>

	　　_________作为教育扶贫项目的承办单位，认真承诺：在项目实施过程中发扬“爱国奉献、追求卓越”的精神，以_________的工作作风，珍惜甲方的每一分爱心捐赠，使之在贫困地区发挥最大的效力。<br>

	　　甲方随时可以指导和监督乙方的教育扶贫工作，随时可以审计捐赠款的使用情况。<br>

                 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;甲方(盖章)：_________&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;乙方(盖章)：_________<br>

                 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;负责人(签字)：_______ &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;负责人(签字)：_______<br>
                 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;    _________年____月____日&emsp;&emsp;&emsp;&emsp;_________年____月____日<br>

                 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;签订地点：_____________&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;签订地点：_____________
										</span>
                      <span slot="footer" class="dialog-footer">
											<el-button @click="centerDialogVisible = false">取 消</el-button>
											<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
										</span>
                    </el-dialog>

                  </div>
                </div>
              </li>


              <li class="one on">
                <div class="left"></div>
                <div class="left_top">
                  <i>关于我们</i><img src="../../../assets/image/home/button1.png">
                </div>
                <div class="right">
                  <div class="right_content1">
                    &emsp;&emsp;关于我们：
                    流浪梦想捐赠平台是一个成立于2021年的服务型公益捐赠及众筹等多类型统一的平台，我们致力于服务那些需要帮助的学生能够寻找到合适的帮助人，同时也能让想要献出爱心的人士可以有一个公正公开的合适捐赠渠道。同时我们还有义卖商城等其它公益爱心类型的项目，期待您与大家一起放飞流浪的梦想！

                  </div>

                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div> -->
	<div class="intr">
		<div class="midBoxs">
			<div class="midBoxs2">
				<div class="midmid">

				</div>
			</div>
			<div class="midBoxs1">
				<div class="midBox">
					<div class="boxImg boxImg1">

					</div>
					<div class="boxTitle ">
						义卖
					</div>
				</div>
				<div class="midBox">
						<div class="boxImg boxImg2">

						</div>
						<div class="boxTitle">
							捐赠
						</div>
				</div>
				<div class="midBox">
						<div class="boxImg boxImg3">

						</div>
						<div class="boxTitle">
							众筹
						</div>
				</div>
				<div class="midBox">
						<div class="boxImg boxImg4">

						</div>
						<div class="boxTitle">
							梦想
						</div>
				</div>
			</div>

			<div class="midBoxs3">
				<div class="midmid">

				</div>
			</div>
		</div>
		<div class="midIntr">
			<div class="midIntrBoxs intr1">

			</div>
			<div class="midIntrBoxs intr2">
				<div class="intrWord">
					关于我们:<br>
					&emsp;&emsp;流浪梦想捐赠平台是一个成立于2021年的服务型公益捐赠及众筹等多类型统一的平台，我们致力于服务那些需要帮助的学生能够寻找到合适的帮助人，同时也能让想要献出爱心的人士可以有一个公正公开的合适捐赠渠道。同时我们还有义卖商城等其它公益爱心类型的项目，期待您与大家一起放飞流浪的梦想！
				</div>
			</div>
			<div class="midIntrBoxs intr3">
				<div class="intrTitle">
					联系我们
				</div>
				<div class="intrContent">
					机构地址：<br />
					云南省昆明市盘龙区环城东路50号 </span><br />
					捐赠热线：<br />
					134334341222(毕先生) <br>152372737282(代老板)
					<br /><br />
					谨慎捐款，支付后暂不支持退款
				</div>
			</div>
			<div class="midIntrBoxs intr4">

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "intrList",
		data() {
			return {
				centerDialogVisible: false
			}
		}
	}
</script>

<style scoped>
	.intr {
		width: 100%;
		height: 800px;
		/* background-color: rgb(236, 248, 248); */
		position: relative;
	}

	.midBoxs {
		width: 100%;
		height: 120px;
	}

	.midBoxs1 {
		width: 70%;
		height: 100%;
		float: left;
		margin: 0 auto;
		background-color: white;
		z-index: 999;
		margin-top: -50px;
	}

	.midBoxs2 {
		float: left;
		width: 15%;
		height: 100%;
		position: relative;
		margin-top: -50px;
	}

	.midBoxs3 {
		float: left;
		width: 15%;
		height: 100%;
		position: relative;
		margin-top: -50px;
	}

	.midmid {
		width: 100%;
		height: 50%;
		position: absolute;
		bottom: 0px;
	}

	.midBox {
		float: left;
		width: 23.1%;
		margin-left: 1.5%;
		margin-top: 1%;
		height: 85%;
		background-color: #FEF5E6;
	}
	.midBox:hover{
		margin-top: -5px;
		transition: all 0.8s;
		background-color: #faf6da;
	}
	.midIntr {
		width: 70%;
		margin: 30px auto;
		height: 600px;
		border-radius: 10px;
		overflow: hidden;
	}

	.midIntr .intr1 {
		background-image: url(../../../assets/image/home/mxmx1.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.midIntr .intr2{
		background-color: white;
	}

	.midIntr .intr3 {
		background-color: white;
	}

	.midIntr .intr4 {
		background-image: url(../../../assets/image/home/mxmx2.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.midIntrBoxs {
		float: left;
		width: 50%;
		height: 50%;
	}

	.intrWord {
		width: 95%;
		height: 80%;
		margin: 10% auto;
		font-size: 18px;
		line-height: 30px;
    font-weight: bold;
	}
	.intrTitle{
		font-size: 20px;
		margin-top: 15px;
		margin-left: 105px;
    font-weight: bold;
	}
	.intrContent{
		font-size: 16px;
		margin-top: 17px;
		margin-left: 150px;
		line-height: 30px;
    font-weight: bold;
	}
	.boxImg{
		width: 40%;
		height: 50%;
		margin: 10% auto;

	}
	.boxImg1{
		background: url(../../../assets/image/home/nav_sc1.png);
		background-position: center center;
		background-size: 60%;
		background-repeat: no-repeat;
	}
	.boxImg2{
		background: url(../../../assets/image/home/nav_jz1.png);
		background-position: center center;
		background-size: 60%;
		background-repeat: no-repeat;
	}
	.boxImg3{
		background: url(../../../assets/image/home/nav_zc1.png);
		background-position: center center;
		background-size: 60%;
		background-repeat: no-repeat;
	}
	.boxImg4{
		background: url(../../../assets/image/home/nav_mxmx1.png);
		background-position: center center;
		background-size: 60%;
		background-repeat: no-repeat;
	}
	.boxTitle{
		margin-top: -10%;
		margin-left: 42%;
	}
	/* ************************* */
	.introduction {
		width: 100%;
		height: 500px;
		padding-top: 5px;
		position: relative;

	}

	.intrTop {
		width: 100%;
		height: 450px;
		position: relative;
		top: 30px;
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;

	}

	.xinxi_solution_bg {
		background-size: 100% 400px;
		margin: 0 auto;
		background-color: transparent;

	}

	.xinxi_solution_main {
		/* margin-left: 18%;
	margin-top: 1%; */
		display: flex;
		align-items: center;
	}

	.xinxi_solution_main ul {
		overflow: hidden;
		height: 450px;
		margin: 0 auto;

	}

	.xinxi_solution_main ul li {
		height: 400px;
		float: left;
		width: 70px;
		position: relative;
		overflow: hidden;
		transition: all 0.5s;

		top: 10px;

	}

	.xinxi_solution_main ul li:hover {
		cursor: pointer;
	}

	.xinxi_solution_main ul li:nth-child(1) {
		background-image: url(https://img2.baidu.com/it/u=1745137495,2249798116&fm=26&fmt=auto&gp=0.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.xinxi_solution_main ul li:nth-child(2) {
		background-image: url(../../../assets/image/home/a_img.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.xinxi_solution_main ul li:nth-child(3) {
		background-image: url(https://img0.baidu.com/it/u=1775711949,4130122312&fm=26&fmt=auto&gp=0.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.xinxi_solution_main ul li .left_top {
		position: absolute;
		top: 100px;
		left: 0;
		width: 30px;
		padding: 0 20px;
		text-align: center;
	}

	.xinxi_solution_main ul li .left_top img {
		width: 30px;
	}

	.xinxi_solution_main ul li i {
		font-size: 24px;
		color: #FFF;
	}

	.xinxi_solution_main .left_top {
		font-size: 30px;
		color: #FFF;
	}

	.xinxi_solution_main ul li .left {
		float: left;
		width: 70px;
		background: #000;
		opacity: 0.5;
		height: 400px;
	}

	.xinxi_solution_main ul li .right {
		float: left;
		width: 680px;
		position: relative;
		height: 400px;
		font-size: 18px;
	}


	.xinxi_solution_main ul li.on {
		width: 780px;
	}

	.right_content1 {
		margin-top: 15%;
		font-size: 24px;
		margin-left: 5%;
		color: black;
		line-height: 35px;
	}

	.right_content2 {
		margin-top: 10%;
		font-size: 24px;
		margin-left: 5%;
		color: black;
		line-height: 35px;
	}

	.right_content2 #aa {
		color: red;
		margin-left: 30%;
		text-decoration: underline;
	}

	.right_content2 #aa:hover {
		cursor: pointer;
	}

	.right_content4 {
		margin-top: 10%;
		font-size: 24px;
		margin-left: 25%;
		line-height: 35px;
		color: black;
	}
</style>
